<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent
} from 'echarts/components';
import 'echarts/extension/bmap/bmap';
import { LinesChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([ 
  LinesChart, 
  TitleComponent, 
  TooltipComponent, 
  CanvasRenderer
]);

export default {
  name: "BigData",
  props: {

  },
  components: {

  },
  data() {
    return {
      linesData: [],
      scatterData: [],
      geoCoordMap: {
        成都: [103.9526, 30.7617],
        三亚:[109.5227,18.2577],
        呼和浩特: [111.4124, 40.4901],
        银川市:[106.2064,38.5026],
        北京: [116.4551, 40.2539],
        银川: [106.3586, 38.1775],
        拉萨: [91.1865, 30.1465],
        井冈山: [114.3030,26.7498],
        九寨沟: [103.9441,33.1649],
        东莞: [113.743811,23.018534],
      },
      BJData: [
        [{ name: '成都' }, { name: '三亚', value: 95 }],
        [{ name: '成都' }, { name: '呼和浩特', value: 90 }],
        [{ name: '成都' }, { name: '北京', value: 70 }],
        [{ name: '成都' }, { name: '银川', value: 60 }],
        [{ name: '成都' }, { name: '拉萨', value: 50 }],
        [{ name: '成都' }, { name: '井冈山', value: 40 }],
        [{ name: '成都' }, { name: '九寨沟', value: 30 }],
        [{ name: '成都' }, { name: '东莞', value: 100 }],
      ],
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    initData() {
      let hStep = 300 / (this.BJData.length - 1);
      for (var i = 0; i < this.BJData.length; i++) {
        var dataItem = this.BJData[i];
        var fromCoord = this.geoCoordMap[dataItem[0].name];
        var toCoord = this.geoCoordMap[dataItem[1].name];
        var name = dataItem[0].name + '→' + dataItem[1].name
        let color = echarts.color.modifyHSL('#5A94DF', Math.round(hStep * i))
        if (fromCoord && toCoord) {
          this.linesData.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            name: name,
            coords: [fromCoord, toCoord],
            lineStyle: { //给每条线都不同的样式
              color: color
            }
          });

          this.scatterData.push({
            name: dataItem[1].name,
            value: toCoord.concat(Math.random()*30),
            itemStyle: {
              color: color
            }
          })
        }
      }
    },
  },
  created() {
    
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    this.initData()
   console.log(123123, this.scatterData)
   var planePath =
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    option = {
      tooltip: {
        trigger: 'item',
      },
      bmap: {
        center: [103.9526, 30.7617],
        zoom: 5,
        roam: true,
        mapStyleV2: {
          styleId: '361dba760342656b29da940bcded37cf'
        },
      },
      series: [
        {
          name:'',
          type: 'lines',
          zlevel: 1,
          coordinateSystem: 'bmap',
          data: this.linesData,
          // silent: true,
          effect: {
            show: true,
            // constantSpeed: 80,//配置特效图形的移动动画
            period: 6,//特效动画的时间
            trailLength: 0.5,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
            // color: '#fff',
            symbolSize: 6,
          },
          lineStyle: {
            // color: 'rgb(200, 35, 45)',
            opacity: 0.5,
            width: 1,
            curveness: 0.3
          },
          progressiveThreshold: 500,
          progressive: 200,
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.3)',
            textStyle: {
              color: '#fff'
            },
            formatter: function (params) {
              return params.name
            } 
          },
        },
        {
          name: '',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke',
            period: 5, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 3 //波纹圆环最大限制，值越大波纹越大
          },
          // symbolSize: 8,
          symbolSize: function (params) {
            console.log(234, params)
            return params[2];
          },
          // label: {
          //   show: true,
          //   position: 'right',
          //   formatter: '{b}'
          // },
          colorBy: 'data',
          data: this.scatterData,
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.3)',
            textStyle: {
              color: '#fff'
            },
            formatter: function (params) {
              return params.name
            } 
          },
        }
        // {
        //   type: 'lines',
        //   coordinateSystem: 'bmap',
        //   zlevel: 2,
        //   symbol: ['none', 'arrow'],
        //   symbolSize: 10,
        //   effect: {
        //     show: true,
        //     period: 6,
        //     trailLength: 0,
        //     symbol: planePath,
        //     symbolSize: 15
        //   },
        //   lineStyle: {
        //     // color: '#ffa022',
        //     width: 1,
        //     opacity: 0.6,
        //     curveness: 0.2
        //   },
        //   data: busLines
        // },

      ]
    }

    myChart.setOption(option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  #main {
    position: relative;
    width: 600px; 
    height: 600px; 
  }

  ::v-deep .anchorBL {
    display: none !important;;
  }
</style>